<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入公共样式 -->
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../js/nav.js"></script>
  <style>
  .product-item::before {
  content: 'new';
  position: absolute;
   top: 8px;
  right: 13px;
  background-color: #ff6347; /* 设置"hot"样式的背景颜色 */
  color: #fff; /* 设置"hot"样式的文字颜色 */
  padding: 5px 10px;
  border-radius:  5px; /* 如果需要圆角效果，可以调整这里的数值 */
}
  </style>
</head>
<body>
  <!-- 头部 -->
  <div class="header">
    <img src="../img/logo/logo.svg" alt="">
  </div>
  <!-- 导航栏 -->
  <div>
    <nav id="navbar">
      <div>
        <a href="./index.html" class="nav-item" onclick="highlightNavItem(this,event)">首页</a>
        <a href="./category.html" class="nav-item" onclick="highlightNavItem(this,event)">商品分类</a>
        <a href="./new.html" class="nav-item" onclick="highlightNavItem(this,event)">每月上新</a>
        <a href="./hot.html" class="nav-item" onclick="highlightNavItem(this,event)">热销推荐</a>
        <a href="./service.html" class="nav-item" onclick="highlightNavItem(this,event)">在线客服</a>
        <a href="./about.html" class="nav-item" onclick="highlightNavItem(this,event)">关于我们</a>
      </div>
      <div class="icons">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/sousuo.png" alt="搜索">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/jushoucang.png" alt="收藏">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gouwuche.png" alt="购物车">
        <img src="../img/nav-icon/icon_ln9scrooo9m/icon_ln9scrooo9m/gerenzhongxin.png" alt="个人中心">
      </div>
    </nav>
  </div>
  <!-- 内容 -->
  <div style="margin-top: 50px;" class="product-list">
    <div class="product-item">
      <img src="../img/product/product-1-1.jpg" alt="Product 1">
      <h3>clothing</h3>
      <p>Colorful Pattern Shirts</p>
      <span class="price">$238.85</span>
      <button>Add to Cart</button>
    </div>
  
    <div class="product-item new">
      <img src="../img/product/product-2-1.jpg" alt="Product 2">
      <h3>clothing</h3>
      <p>Plain Color Pocket Shirts</p>
      <span class="price">$138.85</span>
      <button>Add to Cart</button>
    </div>
    <div class="product-item">
      <img src="../img/product/product-3-1.jpg" alt="Product 2">
      <h3>Shirts</h3>
      <p>Vintage Floral Oil Shirts</p>
      <span class="price">$338.85</span>
      <button>Add to Cart</button>
    </div>
    <div class="product-item">
      <img src="../img/product/product-4-1.jpg" alt="Product 2">
      <h3> clothing</h3>
      <p>Colorful Hawaiian Shirts</p>
      <span class="price">$123.85</span>
      <button>Add to Cart</button>
    </div>
    <div class="product-item">
      <img src="../img/product/product-5-1.jpg" alt="Product 2">
      <h3> Shirts</h3>
      <p>Flowers Sleeve Lapel Shirt</p>
      <span class="price">$164.85</span>
      <button>Add to Cart</button>
    </div>
    <div class="product-item">
      <img src="../img/product/product-6-1.jpg" alt="Product 2">
      <h3> Shirts</h3>
      <p>Ethnic Floral Casual Shirts</p>
      <span class="price">$250.85</span>
      <button>Add to Cart</button>
    </div>
    <div class="product-item">
      <img src="../img/product/product-7-1.jpg" alt="Product 2">
      <h3> shone</h3>
      <p>Stitching Hole Sandals</p>
      <span class="price">$520.12</span>
      <button>Add to Cart</button>
    </div>
    <div class="product-item">
      <img src="../img/product/product-8-1.jpg" alt="Product 2">
      <h3> Shirts</h3>
      <p>Mens Porcelain Shirt</p>
      <span class="price">$134.85</span>
      <button>Add to Cart</button>
    </div>
  </div>

</body>
</html>